<template>
    <div class="pt-[30px] pb-[20px] bg-white">
        <el-tabs v-model="activeStep" class="demo-tabs">
            <el-tab-pane label="基本信息" :name="0">
                <div>
                    <!-- 基本信息 -->
                    <div class="bg-white ">
                        <BaseHead>基本信息</BaseHead>
                        <div class="p-[10px]">
                            <el-descriptions title="" :column="2" border label-width="140">
                                <el-descriptions-item label-class-name="gdlable" label="著作名称">{{
            ruleForm.name
        }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="著作类别">
                                    <Feedback :id="ruleForm.typeId" :list="zzlbList">
                                    </Feedback>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="出版单位">{{
            ruleForm.publishUnit
        }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="出版社级别">
                                    <Feedback :id="ruleForm.publishLevel" :list="cbdwjbList">
                                    </Feedback>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="出版时间">{{
            dateFormatter3(ruleForm.publishDate)
        }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="所属单位">
                                    <Feedback :id="ruleForm.unitId" :list="zcgsdwList"
                                        :mapping="['codeColumn', 'valueColumn']">
                                    </Feedback>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="教育部统计归属">{{
            ruleForm.subjectClassId == 2 ? '科技类' : "社科类"
        }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="一级学科">
                                    <Feedback :id="ruleForm.subjectId"
                                        :list="ruleForm.subjectClassId == 2 ? kjxkflList : skxkflList"
                                        :mapping="['id', 'label']">
                                    </Feedback>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="项目来源">
                                    <Feedback :id="ruleForm.projectSourceId" :list="xmlyList"
                                        :mapping="['id', 'label']">
                                    </Feedback>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="出版地">{{
            ruleForm.publishAddressId == '0' ? '国内' : '国外'
        }}</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </div>
                    <!-- 详细信息 -->
                    <div class="bg-white mt-[10px]">
                        <BaseHead>详细信息</BaseHead>
                        <div class="p-[10px]">
                            <el-descriptions title="" :column="2" border label-width="140">
                                <el-descriptions-item label-class-name="gdlable" label="学校署名">{{
            ruleForm.schoolSign == '0' ? '第一单位' : '非第一单位'
        }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="总字数">{{
                ruleForm.wordNumber
            }}万字</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="是否翻译为外文">{{
                ruleForm.isTranslated == '0' ? '否' : '是'
            }}</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="语种">
                                    <Feedback :id="ruleForm.languageId" :list="yyList">
                                    </Feedback>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="ISBN号">{{
            ruleForm.isbn
        }}万字</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="CIP号">{{
                ruleForm.cip
            }}万字</el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="电子版附件">
                                    <div v-for="item in ruleForm.fileList" :key="item.id">{{ item.fileName
                                        }}<el-link type="primary" style="margin-left: 8px;"
                                            @click="downloadMet(item.id)">下载</el-link>
                                    </div>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="gdlable" label="备注">{{
            ruleForm.note
                                    }}</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </div>
                    <!-- 作者信息 -->
                    <div class="bg-white mt-[10px]">
                        <BaseHead>作者信息</BaseHead>
                        <div class="p-[10px]">
                            <el-table :data="tableData" border style="width: 100%">
                                <el-table-column align="center" type="index" label="署名顺序" width="80" />
                                <el-table-column align="center" prop="authorType" label="作者类型">
                                    <template #default="scope">
                                        {{
                                        scope.row.authorType == '1' ? '教师' : scope.row.authorType == '2' ? '学生'
                                        : '校外'
                                        }}</template>
                                </el-table-column>
                                <el-table-column align="center" prop="authorName" label="作者姓名">

                                </el-table-column>
                                <el-table-column align="center" prop="eduLevelId" label="学历">
                                    <template #default="scope">
                                        <Feedback :id="scope.row.eduLevelId" :list="xlList"></Feedback>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="titleId" label="职称">
                                    <template #default="scope">
                                        <el-tree-select v-model="scope.row.titleId" node-key="id" :data="zcList"
                                            :render-after-expand="false" disabled />
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="authorUnit" label="工作单位">
                                </el-table-column>
                                <el-table-column align="center" label="承担角色">
                                    <template #default="scope">
                                        <Feedback :id="scope.row.bearTypeId" :list="cdjsList">
                                        </Feedback>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="wordNumber" label="参编字数(万字)">
                                </el-table-column>
                                <el-table-column align="center" prop="workRatio" label="贡献率（%）">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="依托项目" :name="1">
                <supportProjectView :productId="id"></supportProjectView>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>
<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import supportProjectView from "@/views/achievement/components/supportProjectView.vue"
import useCategoryStore from "@/store/modules/category";
const props = defineProps({
    id: String,
})

const categoryStore = useCategoryStore();
const { xlList, zcgsdwList, zcList, xmlyList, zzlbList, cbdwjbList, kjxkflList, skxkflList, cdjsList, yyList } = storeToRefs(categoryStore); // 解构状态
const { getxlList, getzcgsdwList, getzcList, getxmlyList, getzzlbList, getcbdwjbList, getkjxkflList, getskxkflList, getcdjsList, getyyList } = categoryStore; // 解构方法




const ruleForm = reactive({
});
const tableData = reactive([
]);
const getRuleForm = (i) => {
    if (!xlList.value.length) {
        getxlList()
    }
    if (!zcgsdwList.value.length) {
        getzcgsdwList()
    }
    if (!zcList.value.length) {
        getzcList()
    }
    if (!xmlyList.value.length) {
        getxmlyList()
    }
    if (!zzlbList.value.length) {
        getzzlbList()
    }
    if (!cbdwjbList.value.length) {
        getcbdwjbList()
    }
    if (!kjxkflList.value.length) {
        getkjxkflList()
    }
    if (!skxkflList.value.length) {
        getskxkflList()
    }
    if (!cdjsList.value.length) {
        getcdjsList()
    }
    if (!yyList.value.length) {
        getyyList()
    }

    if (i.authorList && i.authorList.length > 0) {
        tableData.length = 0; // 清空数组
        tableData.push(...i.authorList); // 添加新元素

    }
    for (const key in i) {
        ruleForm[key] = i[key];
    }
}
const activeStep = ref(0)
const { proxy } = getCurrentInstance();
const downloadMet = (i) => {
    proxy.$download.common(i)
}
defineExpose({
    getRuleForm
})
</script>
<style lang="scss">
.gdlable {
    width: 140px;
}
</style>
<style scoped lang="scss">
@import url("@/views/achievement/index.scss");

:deep(.el-select--default) {


    .el-select__wrapper.is-disabled {
        background-color: #fff;
        box-shadow: 0 0 0 0px var(--el-select-disabled-border) inset;
        color: #606266;
        cursor: not-allowed;

        .el-select__selected-item {
            color: #606266;
        }
    }

    .el-select__suffix {
        display: none;
    }
}
</style>
